<template>
  <view>
    <view class="myform">
      <uni-forms
        :value="formData"
        :rules="rules"
        ref="form"
        validate-trigger="bind"
        err-show-type="undertext"
      >
        <view class="pageTitle">基本信息</view>
        <view class="info">
          <view class="info-item">
            <view>姓名</view>
            <view>{{ personInfo.name || "" }}</view>
          </view>
          <view class="info-item">
            <view>性别</view>
            <view>{{ personInfo.genderName || "" }}</view>
          </view>
          <!-- <view class="info-item">
            <view>证件类型</view>
            <view>{{ cardType || "" }}</view>
          </view> -->
          <view class="info-item">
            <view>身份证/ 其他证件</view>
            <view>{{ personInfo.cardId || "" }}</view>
          </view>
          <view class="info-item">
            <view>年龄</view>
            <view>{{ personInfo.age || "" }}</view>
          </view>
          <view class="info-item">
            <view>隔离类型</view>
            <!-- <view>{{ personInfo.personClassify || "" }}</view> -->
            <view>{{ movePersonType || "" }}</view>
          </view>
        </view>

        <view class="form-wrapper">
          <view class="title pageTitle"> 转诊就医</view>
          <view class="form-content">

            <view class="form-item">
              <view class="label">转诊时间</view>
              <picker
                mode="multiSelector"
                :value="dateTime"
                @change="turnOutDateChange"
                class="picker-control-con-picker-date"
                @columnchange="turnOutColumn"
                :range="dateTimeArray"
              >
                <view class="lableBox" style="display: inline-block">
                  <view class="uni-input">{{
                    formData.seeDoctorTime || "请选择转诊时间"
                  }}</view>
                </view>
              </picker>
            </view>
          
            <view class="form-item">
              <view class="label">转诊目的地</view>
              <uni-easyinput
                type="text"
                v-model="formData.seeDoctorAddress"
                placeholder="请输入"
              ></uni-easyinput>
            </view>
            <view class="form-item">
              <view class="label">主要诊断</view>
              <uni-easyinput
                type="text"
                v-model="formData.diagnose"
                placeholder="请输入"
              ></uni-easyinput>
            </view>
            <view class="form-item">
              <view class="label">转送原因</view>
              <uni-easyinput
                type="text"
                v-model="formData.cause"
                placeholder="请输入"
              ></uni-easyinput>
            </view>
          </view>

          <view class="title pageTitle"> 转出情况</view>
          <view class="form-content">
            <view class="form-item">
              <view class="label">救护车单位</view>
              <uni-easyinput
                type="text"
                v-model="formData.outAmbulanceDept"
                placeholder="请输入"
              ></uni-easyinput>
            </view>
            <view class="form-item">
              <view class="label">救护车车牌</view>
              <uni-easyinput
                type="text"
                v-model="formData.outAmbulanceNumber"
                placeholder="请输入"
              ></uni-easyinput>
            </view>
            <view class="form-item">
              <view class="label">医护人员</view>
              <uni-easyinput
                type="text"
                v-model="formData.outMedicalPerson"
                placeholder="请输入"
              ></uni-easyinput>
            </view>
            <view class="form-item">
              <view class="label">随行人员</view>
              <uni-easyinput
                type="text"
                v-model="formData.outEscortPerson"
                placeholder="请输入"
              ></uni-easyinput>
            </view>
          </view>

          <view class="pageTitle">就诊情况</view>
          <view class="form-content">
            <view class="info-item form-item ">
              <view class="item-bg" :class="{ 'item-bg-active': formData.seeDoctorStatus ==='1'}">
                <view class="label">无需回隔离点</view>
                <uni-data-checkbox
                  v-model="formData.seeDoctorStatus"
                  :localdata="results"
                  class="my-raido"
                  @change="onCheckRadioChange"
                ></uni-data-checkbox>
              </view>
            </view>
            <view class="form-item item-padding" v-if="formData.seeDoctorStatus ==='1'">
              <view >无需回隔离点原因</view>
              <uni-easyinput
                type="text"
                v-model="formData.noReturnCause"
                placeholder="请输入您的答案"
              ></uni-easyinput>
            </view>
            <!-- <view class="seeDoctorStatus-label" v-if="formData.seeDoctorStatus ==='1'">无需回隔离点原因</view>
            <view class="info-item" v-if="formData.seeDoctorStatus ==='1'">
              <textarea name="reason" id="" cols="30" rows="10" class="reason" v-model="formData.reason"></textarea>
            </view> -->

            <!-- <view class="info-item form-item inline-item form-item-border-none form-item-radio"> -->
            <view class="info-item form-item">
              <view class="item-bg"  :class="{ 'item-bg-active': formData.seeDoctorStatus ==='2'}">
                <view class="label">转回继续隔离</view>
                <uni-data-checkbox
                  v-model="formData.seeDoctorStatus"
                  :localdata="resultsBack"
                  class="my-raido"
                  @change="onCheckRadioChange"
                ></uni-data-checkbox>
              </view>
            </view>
          </view>

          <view v-if="formData.seeDoctorStatus ==='2'">
            <view class="title pageTitle"> 转入情况</view>
            <view class="form-content">
              <view class="form-item">
                <view class="label">转入时间</view>
                <picker
                  mode="multiSelector"
                  :value="entryTime"
                  @change="entryDateChange"
                  class="picker-control-con-picker-date"
                  @columnchange="entryColumn"
                  :range="entryTimeArray"
                >
                  <view class="lableBox" style="display: inline-block">
                    <view class="uni-input">{{
                      formData.intoTime || "请选择转入时间"
                    }}</view>
                  </view>
                </picker>
              </view>
              <view class="form-item">
                <view class="label">救护车单位</view>
                <uni-easyinput
                  type="text"
                  v-model="formData.intoAmbulanceDept"
                  placeholder="请输入"
                ></uni-easyinput>
              </view>
              <view class="form-item">
                <view class="label">救护车车牌</view>
                <uni-easyinput
                  type="text"
                  v-model="formData.intoAmbulanceNumber"
                  placeholder="请输入"
                ></uni-easyinput>
              </view>
              <view class="form-item">
                <view class="label">医护人员</view>
                <uni-easyinput
                  type="text"
                  v-model="formData.intoMedicalPerson"
                  placeholder="请输入"
                ></uni-easyinput>
              </view>
              <view class="form-item">
                <view class="label">随行人员</view>
                <uni-easyinput
                  type="text"
                  v-model="formData.intoEscortPerson"
                  placeholder="请输入"
                ></uni-easyinput>
              </view>
              <view class="form-item">
                <view class="label">患者情况</view>
                <uni-easyinput
                  type="text"
                  v-model="formData.patientInfo"
                  placeholder="请输入"
                ></uni-easyinput>
              </view>
            </view>
          </view>
          
          <view class="pageTitle">上传文件</view>
          <view class="form-content">
            <view  class="unload-item">
              <view class="upload-btn mg-right"  v-for="item in imgList" :key="item">
                <view class="close" @click="deleteImg(item)">
                  <image class="close-img"  src="https://szgd-dev.tgovcloud.com/public/images/referral/icon-close.png" mode="widthFix"></image>
                </view>
                <image class="full-img"  :src="item.filePath" mode="aspectFit" @click="preview(item.filePath)"></image>
              </view>
              <view class="upload-btn" @click="chooseImg">
                <image class="middle-img"  src="https://szgd-dev.tgovcloud.com/public/images/referral/icon-addfile.png" mode="widthFix"></image>
              </view>
            </view>
          </view>

        </view>

        <view class="example">
          <button class="submit" @click="submitForm">提 交</button>
        </view>
      </uni-forms>

      <view class="pop-view">
        <!-- 普通弹窗 -->
        <uni-popup
          @touchmove.stop.prevent="clear"
          ref="popup"
          type="center"
        >
          <view class="popup-content"  @click="closePreview">
            <image class="preview-img"  :src="previewUrl" mode="widthFix"></image>
          </view>
        </uni-popup>
      </view>

    </view>
  </view>
</template>

<script>
import { cardTypes, } from "@/data";
import { getData, getReferralRecord,deleteUploadImg} from "@/api/index";
const {
  dateTimePicker,
  getMonthDay,
  generateTimeStr,
} = require("@/utils/dateTimePicker.js");
import dayjs from "dayjs";

export default {
  data() {
    return {
      dateTimeArray:null,   // 转诊（转出）时间日期插件数据
      dateTime: [],         // 转诊（转出）时间
      entryTimeArray:null,  // 转入时间日期插件数据
      entryTime: [],        // 转入时间
      personInfo: {},       // 转诊就医人员数据
      // formHandle: {
      //   cyfsIndex: "",
      //   mildSymptomIds: [],
      //   mildSymptomIdsCache: [],
      //   severeSymptomIds: [],
      //   severeSymptomIdsCache: [],
      //   hscy: "", // 核酸采样
      // },
      results: [
        {
          // text: "无需回隔离点",
          value: "1",
        },
      ],
      resultsBack: [
        {
          // text: "转回继续隔离",
          value: "2",
        },
      ],
      formData: {
        cause: "",  //转诊原因
        // creapers: "",//创建人姓名
        // creapersid: 0,//创建人id
        // creatime: "", //创建时间
        diagnose: "", //主要诊断
        intoAmbulanceDept: "", //转入救护车单位
        intoAmbulanceNumber: "", //转入救护车车牌
        intoEscortPerson: "", //转入随行人员
        intoMedicalPerson: "", //转入医务人员
        intoTime: "", //转入时间
        // isValid: 0, //是否有效（1-是，0-否）
        // modipers: "",//修改人
        // modipersid: 0,//修改人id
        // moditime: "",//修改时间
        noReturnCause: "",//无需回点隔离原因
        outAmbulanceDept: "",//转出救护车单位
        outAmbulanceNumber: "",//转出救护车车牌
        outEscortPerson: "",//转出随行人员
        outMedicalPerson: "",//转出医务人员
        outTime: "",//转诊（转出）时间
        patientInfo: "",//患者情况
        personId: "",//隔离人员id，【必传】
        // remarks: "",//备注
        seeDoctorAddress: "",//就医目的地
        // seeDoctorId: "",//转诊就医记录表主键
        seeDoctorStatus: "",//就诊情况（0已转出就诊 1无需回点隔离 2转回继续隔离）
        seeDoctorTime: "",//就医时间
      },
      genderList:[
        {value:0, label:"女"},
        {value:1, label:"男"},
        // {value:'', label:""},
      ],
      imgList:[],     // 图片url数组
      fileIdList:[],  // 图片id数组
      previewUrl:'',  // 图片预览地址
      personTypeList:[], // 隔离人员类型字典
      movePersonType:'', // 隔离人员类型（文字）
      rules: {
        name: {
          rules: [
            {
              required: true,
              errorMessage: "请录入姓名"
            }
          ]
        },
        cardType: {
          rules: [
            {
              required: true,
              errorMessage: "请录入姓名"
            }
          ]
        },
        cardId: {
          rules: [
            {
              required: true,
              errorMessage: "请录入证件号码"
            }
          ]
        },
        telPhone: {
          rules: [
            {
              required: true,
              errorMessage: "请录入手机号码"
            },{
              pattern: '^1[0-9]{10}$',
              errorMessage: "手机号码格式不正确"
				    }
          ]
        },
        daSourceId: {
          rules: [
            {
              required: true,
              errorMessage: "请录入姓名"
            }
          ]
        }
      },
      isolationId:'',
    };
  },
   async onLoad(ev) {
    // 初始化时间
    this.initTime();

    // 转诊就医人员数据回显
    this.initUserInfo(ev);

    // 初始化转诊、转出时间
    this.initSetCurrentTime();
  },
  onReady() {},
  methods: {
    async initUserInfo(ev) {
      const personInfo = uni.getStorageSync("personInfo")
      console.log('隔离人员基本信息缓存：',personInfo);
      if (personInfo) {
        this.personInfo = personInfo;
        this.personInfo.genderName = this.gender(this.personInfo.gender,this.personInfo);
        this.formData.personId = personInfo.personId;
        this.formData.isolateId = personInfo.isolateId;

        // 证件类型
        // cardTypes.forEach((item) => {
        //   if (item.value == personInfo.cardType) {
        //     this.cardTypeText = item.label;
        //   }
        // });

        // 查询人员类型
        this.personTypeList = await this.$store.dispatch('getDic','person_classify');
        console.log('personTypeList',this.personTypeList);
        // const item = JSON.parse(decodeURIComponent(ev.item));
        if( personInfo.personClassify ) {
          const typeObj = this.personTypeList.find(obj => obj.value == personInfo.personClassify);
          this.movePersonType = typeObj ? typeObj.label : '-';
        }

        // 查询转诊就医记录
        getReferralRecord(personInfo.personId).then((res)=>{
          let record = res;
          for(var key in record){
            if (key != 'seeDoctorTime' && key !='intoTime' && key !='personId') {
              this.formData[key] = record[key]; 
            }
          }
          
          // 1.5版本暂时不做图片回显
          // if (record.files) {
          //   this.imgList = record.files;
          //   this.imgList.forEach(item=>{
          //     this.fileIdList.push(item.fileId);
          //   })
          // }
          // console.log('fileIdList:',this.fileIdList);
        });
      }
    },
    initTime() {
      let date = new Date();
      let endYear = date.getFullYear();
      // 获取完整的年月日 时分秒，以及默认显示的数组
      let obj = dateTimePicker(this.startYear, endYear);

      obj.dateTimeArray[0] = [new Date().getFullYear()];

      // 精确到分的处理，将数组的秒去掉
      // let lastArray = obj.dateTimeArray.pop();
      // let lastTime = obj.dateTime.pop();

      // 转诊（转出）时间
      this.dateTimeArray = obj.dateTimeArray;
      this.dateTime = obj.dateTime;

      // 转入时间
      this.entryTimeArray = obj.dateTimeArray;
      this.entryTime = obj.dateTime;
    },
    // 初始化页面当前显示时间
    initSetCurrentTime(){
      const dateStr = dayjs().format('YYYY-MM-DD HH:mm:ss')
      this.formData.seeDoctorTime = dateStr;
      this.formData.intoTime = dateStr;
      // console.log(dateStr)
    },
    // bindDateChange(e) {
    //   this.dateTime = e.detail.value;
    //   let timer = generateTimeStr(this.dateTimeArray, this.dateTime);
    //   let thisTimer = dayjs().format('YYYY-MM-DD HH:mm:ss')
    //   this.formData.seeDoctorTime = this.compareTime(timer,thisTimer)
    //   //ios时间不能用'-'解析成时间戳
    // },

    //ios时间不能用'-'解析成时间戳
    compareTime(timer,thisTime){
      var _timer = timer.replace(/-/g,'/');
      var _thisTime = thisTime.replace(/-/g,'/');
      var date1 =  new Date(_timer);
      var date2 = new Date(_thisTime);
      // if(date1>date2){
      //   // 设置选择时间不大于当前时间
      //   return thisTime
      // }
      return timer;   // 可以选择当前日期之后的日期
    },

    // 修改时间
    bindDateChange(e, time, timeArr, targetType) {
      time = e.detail.value;
      let timer = generateTimeStr(timeArr, time);
      let thisTimer = dayjs().format('YYYY-MM-DD HH:mm:ss')
      let targetTime = this.compareTime(timer,thisTimer)
      if (targetType ==1) {
        this.formData.seeDoctorTime = targetTime
      }else{
        this.formData.intoTime = targetTime
      }
    },
    // 转诊（转出）时间修改
    turnOutDateChange(e){
      this.bindDateChange(e, this.dateTime, this.dateTimeArray, 1);
    },

    // 转入时间修改
    entryDateChange(e){
      this.bindDateChange(e, this.entryTime, this.entryTimeArray, 2);
    },

    // /*年,月切换时重新更新计算*/
    // changeDateTimeColumn(e) {
    //   //let {id} = e.target;
    //   let { column, value } = e.detail;
    //   if (column == 0 || column == 1) {
    //     //直接修改数组下标视图不更新,用深拷贝之后替换数组
    //     let dateTime = JSON.parse(JSON.stringify(this.dateTime));
    //     let dateTimeArray = JSON.parse(JSON.stringify(this.dateTimeArray));
    //     dateTime[column] = value;
    //     dateTimeArray[2] = getMonthDay(
    //       dateTimeArray[0][dateTime[0]],
    //       dateTimeArray[1][dateTime[1]]
    //     );
    //     this.dateTime = dateTime;
    //     this.dateTimeArray = dateTimeArray;
    //   }
    // },

    /*年,月切换时重新更新计算*/
    changeDateTimeColumn(e, time, timeArr) {
      //let {id} = e.target;
      let { column, value } = e.detail;
      if (column == 0 || column == 1) {
        //直接修改数组下标视图不更新,用深拷贝之后替换数组
        let dateTime = JSON.parse(JSON.stringify(time));
        let dateTimeArray = JSON.parse(JSON.stringify(timeArr));
        dateTime[column] = value;
        dateTimeArray[2] = getMonthDay(
          dateTimeArray[0][dateTime[0]],
          dateTimeArray[1][dateTime[1]]
        );
        time = dateTime;
        timeArr = dateTimeArray;
      }
    },
    
    // 转诊（转出）时间重计算
    turnOutColumn(e){
      this.changeDateTimeColumn(e, this.dateTime, this.dateTimeArray);
    },

    // 转入时间重计算
    entryColumn(e){
      this.changeDateTimeColumn(e, this.entryTime, this.entryTimeArray);
    },
    // 转诊情况radio
    onCheckRadioChange(e){
      const value = e.detail.value;
      this.formData.seeDoctorStatus = value;
      // if (value == "0") {
      //   this.formData.cyfs = "";
      //   this.formHandle.cyfsIndex = "";
      // }
    },

    // 选图片、
    chooseImg(){
      if (this.imgList.length > 3) {
        uni.showToast({
          title: '最多只能上传4份文件',
          icon:'none',
          duration: 2000
        })
        return;
      }
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success:  (res)=> {
          console.log('选择图片====', res);
          
          // 上传图片
          this.uploadImg(res);
        }
      });
    },
    
    // 上传
    uploadImg({tempFilePaths}){
      let url= process.env.VUE_APP_BASE_URL + '/files/upload';
      let token = uni.getStorageSync('token');
      uni.showLoading();
      uni.uploadFile({
        url,
        filePath: tempFilePaths[0],
        name: 'file',  //后台接收字段名
        formData: {},
        header:{
          "Content-Type": "multipart/form-data",
          'x-token': token || '1234567890'
        },
        success: (res) => {
          uni.hideLoading()
          let result=JSON.parse(res.data||'{}')
          console.log('上传返回===', result)
          if (result.code == 200){

            // 图片url加入显示序列
            let obj = {
              filePath: tempFilePaths[0],
              fileId:result.data.fileId
            };
            this.imgList.push(obj);
            // 储存图片id
            this.fileIdList.push(result.data.fileId);
            console.log(result);
          }else{
            uni.showToast({
              title: result.msg||'图片上传失败',
              icon:'none',
              duration: 2000
            })
          }

        },
        fail:(err)=>{
          uni.hideLoading()
          console.log('请求失败_______________',err)
        }
      })
    },

    // 预览图片
    preview(url){
      this.previewUrl = url;
      this.$refs.popup.open("center");
    },

    closePreview(){
      this.$refs.popup.close();
    },

    // 删除图片
    deleteImg(url){
      console.log(url);
      //删除页面显示
      let idx = this.imgList.indexOf(url);
      this.imgList.splice(idx, 1); 

      //删除服务器图片指向
      deleteUploadImg(this.fileIdList[idx]);

      //删除前端储存的图片id
      this.fileIdList.splice(idx, 1); 
    },

    // 处理性别字段
    gender(sex,params){
      // 先判断gender，若没有值则判断身份证倒数第二位，奇数为男，偶数为女
      if (sex == 0) {
        return '女'
      }else if(sex == 1){
        return '男'
      }else{
        if (params.cardType == 0) {
          console.log('身份证倒数第二位：',params.cardId.slice(-2,-1));
          if (params.cardId && params.cardId.slice(-2,-1)%2 == 0 ) {
            return '女'
          }else if(params.cardId && params.cardId.slice(-2,-1)%2 != 0){
            return '男'
          }else{
            return ''
          }
        }else{
          return ''
        }
      }
    },

    // 提交转诊就医记录
    async submitForm() {
      // 置空数据
      this.formData.files = this.fileIdList;
      this.formData.seeDoctorId = '';
      if (this.formData.seeDoctorStatus === '' || this.formData.seeDoctorStatus === '0') {
        this.formData.intoTime = '';
      }
    
      await getData('addReferralPerson','post', this.formData).then(async res=>{
        // 无需回隔离点，跳离点登记
        if (this.formData.seeDoctorStatus == '1') {
          uni.setStorage({ key: 'personInfo', data: this.formData });
          uni.navigateTo({
            url: `../../../pages/checkOut/index?type=referral`,
          });
          return;
        }
        // 转回继续隔离，跳转成功页
        uni.navigateTo({
          url: `../referral/success?addPerson=true`,
        });
      });
    },
  },
  components: {},
};
</script>

<style lang="scss" rel="stylesheet/scss">
.picker-control {
  padding: 20rpx 40rpx;
  box-sizing: border-box;
  align-items: center;
  color: #333333;

  &-title {
    font-weight: 500;
    font-size: 26rpx;
  }

  &-con {
    &-picker {
      margin-top: 20rpx;
      padding: 10rpx 20rpx;
      text-align: left;
      border: 1px solid #f2f2f2;
      border-radius: 8rpx;

      &-date {
        border-left: 0;
        border-right: 0;
        border-top: 0;
        border-bottom: 1px solid #f2f2f2;

        .uni-input {
          line-height: 80rpx;
        }
      }

      .uni-input {
        width: 90%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 26rpx;
      }
    }
  }
}
.form-item {
  position: relative;
  /deep/ .uni-forms-item__inner {
    margin: 0;
    padding-bottom: 0 !important;
  }
  /deep/ .uni-forms-item__content {
    height: 140rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
.myform {
  /deep/ .uni-forms-item__label {
    display: none !important;
  }
  .rightAlign {
    // float: right;
    /deep/ .uni-easyinput__content-input {
      text-align: right;
    }
    /deep/ .uni-easyinput {
      width: 80vw;
    }
  }
}
.picker-text-x {
  font-size: 34rpx;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 48px;
  color: #666666;
  opacity: 1;
}
.pageTitle {
  height: 98rpx;
  line-height: 98rpx;
  font-size: 40rpx;
  border-bottom: 1rpx solid rgba(229, 229, 229, 1);
  padding: 0 32rpx;
  font-family: PingFang SC;
  font-weight: 600;
  color: #000000;
  opacity: 1;
  background-color: #fff;
}
.form-title {
  position: absolute;
  left: 0;

  font-size: 30rpx;
  color: #999999;
}

.info {
  font-size: 30rpx;
  margin-bottom: 30rpx;
  padding: 0 32rpx;
  background: #fff;
  &-item {
    display: flex;
    justify-content: space-between;
    // padding-top: 40rpx;
    // padding-bottom: 40rpx;
    padding-top: 18rpx;
    padding-bottom: 18rpx;
    border-bottom: 1px solid rgba(229, 229, 229, 1);
    font-weight: 500;
    &:last-child {
      border-bottom: 0;
    }
  }
}
.info view view:first-child {
  color: #999999;
  border-bottom: 0;
}
.info view view:last-child {
  color: #666666;
  font-size: 34rpx;
  border-bottom: 0;
}


.item-padding{
  padding-left: 30rpx;
}
.info-item{
  box-sizing: border-box;
  padding: 0;
  height: 140rpx;
  line-height: 140rpx;
}

// 表单
.form-wrapper {
  margin-bottom: 50rpx;
  text {
    color: red;
  }
  .form-content {
    padding: 0 32rpx 32rpx 32rpx;
    background-color: #fff;
    margin-bottom: 30rpx;
    .form-item-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 30rpx;
        color: #999999;
        padding: 48rpx 0;
        border-bottom: 1rpx solid #E5E5E5;
        .item-detail{
          font-size: 34rpx;
          color: #2C9AF1;
        }
      }
  }
  .form-item-border-none {
    border-bottom: none !important;
  }
  .inline-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .risk-value{
    input{
      color: red!important;
    }
  }
  .other-symptom-input {
    border-bottom: 1rpx solid #e4e4e4;
  }
  .form-item-radio {
    label {
      margin-left: 60rpx;
    }
    .uni-data-checklist .checklist-group .checklist-box {
      margin-right: 0 !important;
      margin-left: 60rpx !important;
    }
  }

  .form-item-symptoms {
    .label {
      margin-bottom: 24rpx;
    }
    .checkbox {
      float: left;
      margin-bottom: 30rpx;
      margin-right: 30rpx;
      .label {
        font-weight: bold;
      }
    }
  }

  .main-symptoms {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
  }
  .submit {
    margin-top: 30rpx;
    height: 94rpx;
    line-height: 94rpx;
    background: #2c9af1;
    opacity: 1;
    border-radius: 16rpx;
  }
  .form-item {
    padding-top: 20rpx;
    padding-bottom: 14rpx;
    color: #333333;
    font-size: 26rpx;
    border-bottom: 1rpx solid #e4e4e4;
    .label {
      color: #333333;
      font-size: 30rpx;
      font-weight: bold;
    }
    .checklist-text {
      color: #2c9af1;
      font-size: 26rpx !important;
      // font-weight: bold;
    }
  }
  .form-item-textarea {
    .label {
      padding-bottom: 20rpx !important;
    }
    textarea {
      max-height: 200rpx;
    }
  }

  .form-item-select-picker {
    border-bottom: none;
    .picker {
      position: relative;
      display: flex;
      align-items: center;
      height: 77rpx;
      padding: 0 40rpx;
      background: #ffffff;
      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.16);
      border-radius: 6rpx;
      picker {
        width: 100%;
      }
    }
    .right-arrow-icon {
      display: flex;
      align-items: center;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 50rpx;
      transform: rotate(90deg);
      image {
        width: 20rpx;
      }
    }
  }
  .form-item-date-picker,
  .form-item-textarea,
  .form-item-select-picker {
    padding-bottom: 36rpx;
    .label {
      padding-bottom: 10rpx;
    }
  }

  .inline-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .picker-control-con-picker-date{
    border: none;
  }
}

.item-bg{
  display: flex;
  height: 88rpx;
  box-sizing: border-box;
  background: rgba(242, 242, 242, 1);
  border-radius: 16rpx;
  padding-left: 30rpx;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin-top: 4rpx;
}
.item-bg-active{
  background: rgba(44, 154, 241, 0.1);
}

.unload-item{
  min-height: 273rpx;
  padding: 32rpx 0;
  display: flex;
  // justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  .upload-btn{
    width: 209rpx;
    height: 209rpx;
    background: rgba(227, 239, 253, 1);
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 30rpx 30rpx 0;
    .close{
      position: absolute;
      right: -10rpx;
      top: -25rpx;
      height: 36prx;
      width: 36rpx;
      border-radius: 50%;
      overflow: hidden;
      .close-img{
        width: 100%;
        height: 100%;
        z-index: 10;
      }
    }
    .full-img{
      width: 100%;
      height: 100%;
      border-radius: 16rpx;
    }
    .middle-img{
      width: 48rpx;
      height: 48rpx;
    }
    &:nth-child(3n){
      margin:0 0 30rpx 0;
    }
  }
}
.myform .uni-easyinput__content-input{
  font-size: 30rpx !important;
}

.pop-view{
  .popup-content{
    width: 100%;
  }
  .preview-img{
    width: 1VM;
    height: auto;
  }
}

</style>
